<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="开始" id="btn1">
  <input type="button" value="取消" id="btn2">
  
  <script>
    // setTimeout()   定时炸弹   隔一段时间执行，并且只会执行一次
    // setInterval()  闹钟       隔一段时间执行，并且会重复执行
    

    // 定时器的标示
    var timerId;
    var btn1 = document.getElementById('btn1');
    btn1.onclick = function () {

      // window.setTimeout()
      // 两个参数
      // 第一个参数 要执行的函数
      // 第二个参数 间隔的时间 单位是毫秒
      // 返回值  是一个整数，是定时器的标示
      // timerId = setTimeout(function () {
      //   console.log('爆炸了');
      // }, 3000);
      // 
      timerId = setTimeout(fn, 3000);
      function fn() {
        console.log('爆炸了');
      }
    }

    var btn2 = document.getElementById('btn2');
    btn2.onclick = function () {
      // 取消定时器的执行
      clearTimeout(timerId);
    }
  </script>
</body>
</html>
